<template>
    <div class="h-control-btn">
        <VSvgIcon :icon-name="props.icon" :class-name="props.direction"></VSvgIcon>
    </div>
</template>

<script setup lang="ts">
import VSvgIcon from "@/components/SvgIcon/VSvgIcon.vue"
import { onMounted } from "vue"

interface IControlBtn {
    direction?: string
    icon?: string
    route?: string | number
}

const props = withDefaults(defineProps<IControlBtn>(), {
    direction: "top",
    icon: "direction",
    route: 0
})
onMounted(() => {
    setTimeout(() => {
        const btn = document.querySelector(`.h-control-btn .${props.direction}`) as HTMLElement;
        if (props.route !== null) {
            btn.style.transform = `rotate(${props.route}deg)`
        }
    }, 500);
})
</script>
